<template>
    <div class="fpWrapper">
        <Danmu></Danmu>
        <div class="begin" v-show="showBegin" @touchcancel="stopFlicker()">
            <div class="chooseBtn btnAni" @touchstart="toFlicker()"></div>
        </div>
        <div class="flicker"
             :style="{'background-image':'url(' + flickerImg +')'}"
             v-show="showFlicker">
        </div>
    </div>
</template>

<script>
    import Danmu from './danmu.vue';
    import Icon from './icon.vue';
    export default {
        props: ['resources', 'pageType'],
        data() {
            return{
                flickerImg: this.resources[0],
                flickerDis: ['face', 'hand', 'leg', 'heart', 'youKnow'],
                showJie: false,
                showBegin: true,
                showFlicker: false,
                timer: '',
                index: 0,
            }
        },
        mounted() {
            this.showPic();
        },
        methods: {
            showPic() {
                this.flickerImg = this.resources[0];
                let self = this;
                this.timer = setInterval(() => {
                    self.flickerImg = self.resources[self.index];
                    self.index = (self.index === 4) ? 0 : self.index + 1;
                }, 100);
            },
            toFlicker() {
                this.showBegin = false;
                this.showFlicker = true;
                setTimeout(() => {
                    this.stopFlicker();
                }, 2000);
            },
            stopFlicker() {
                if(this.showFlicker) {
                    clearInterval(this.timer);
                    this.showJie = true;
                    this.$emit('update:pageType', this.flickerDis[this.index]);
                }
            },
            showResult() {
                this.$emit('update:pageType', 'result');
            },

        },
        components: {
            Icon,
            Danmu
        }
    }
</script>
<style lang="less" scoped>
    .fpWrapper{
        height: 100%;
        width: 100%;
        background-image: url("../../img/index/background.jpg");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: bottom;
        overflow: hidden;
        .begin{
            height: 100%;
            width: 100%;
            background-image: url("../../img/index/indextext.png");
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center;
            position: absolute;
            top: 0;
            left: 0;
            .chooseBtn{
                width: 6.6rem;
                height: 1.2rem;
                position: absolute;
                bottom: 1.3rem;
                left: 1.66rem;
                background-image: url("../../img/index/button.png");
                background-size: 100%;
                background-repeat: no-repeat;
            }
            
            .btnAni{
                -webkit-animation: btnAni 2s infinite;
                animation: btnAni 2s infinite;
            }
            @keyframes btnAni{
                0%{
                    transform: scale(1);
                    transform-origin: 50% 50%;
                }
                12%, 37%{
                    transform: scale(0.9);
                }
                25%, 50%{
                    transform: scale(1);
                }
                60%, 80%{
                    transform: rotate(-4deg);
                }
                70%, 90%{
                    transform: rotate(4deg);
                }
                100%{
                    transform: rotate(0deg);
                    transform-origin: 50% 50%;
                }
            }
            @-webkit-keyframes btnAni{
                0%{
                    transform: scale(1);
                    transform-origin: 50% 50%;
                }
                12%, 37%{
                    transform: scale(0.9);
                }
                25%, 50%{
                    transform: scale(1);
                }
                60%, 80%{
                    transform: rotate(-4deg);
                }
                70%, 90%{
                    transform: rotate(4deg);
                }
                100%{
                    transform: rotate(0deg);
                    transform-origin: 50% 50%;
                }
            }
        }
        .flicker {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-size: 100%;
            background-position: center;
            position: absolute;
            top: 0;
            left: 0;
        }

    }
</style>
